<template>
  <div>
    <el-select v-model="condition.year" placeholder="请选择年份" style="padding-top: 50px;margin-left: 100px">
      <el-option
        v-for="item in yearOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="condition.month" placeholder="请选择月份" style="padding-top: 50px;padding-left: 50px;padding-right: 50px">
      <el-option
        v-for="item in monthOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
    <ConsultChart style="height: 800px;margin-top: 0;padding-top: 50px" :data="num"></ConsultChart>
  </div>
</template>
<script>
import ConsultChart from "@/views/chart/ConsultChart";
import {statics} from "@/api/reservation";

export default {
  name: "ConsultStatics",
  components: {ConsultChart},
  data() {
    return {
      num:[],
      yearOptions: [
        {
          value: '2017',
          label: '2017'
        }, {
          value: '2018',
          label: '2018'
        }, {
          value: '2019',
          label: '2019'
        }, {
          value: '2020',
          label: '2020'
        }, {
          value: '2021',
          label: '2021'
        }, {
          value: '2022',
          label: '2022'
        }, {
          value: '2023',
          label: '2023'
        }, {
          value: '2024',
          label: '2024'
        }],
      monthOptions: [
        {
          value: '1',
          label: '1月'
        }, {
          value: '2',
          label: '2月'
        }, {
          value: '3',
          label: '3月'
        }, {
          value: '4',
          label: '4月'
        }, {
          value: '5',
          label: '5月'
        }, {
          value: '6',
          label: '6月'
        }, {
          value: '7',
          label: '7月'
        }, {
          value: '8',
          label: '8月'
        }, {
          value: '9',
          label: '9月'
        }, {
          value: '10',
          label: '10月'
        }, {
          value: '11',
          label: '11月'
        }, {
          value: '12',
          label: '12月'
        }],

      condition: {
        year: null,
        month: null
      }
    }
  },
  methods:{
    query(){
      statics(this.condition)
        .then((response) => {
          if (response.success) {
            this.num = response.data;
          }
        }).catch((e) => {
          this.$message.error(e, "出现未知错误");
      });
    }
  }
}
</script>
<style lang="scss">
</style>
